<!-- 网站信息 -->
<template>
  <div class="website-information">
    <el-form ref="formRef" :rules="rules" class="ls-form" :model="formData" label-width="120px">

      <el-card shadow="never" class="!border-none">
        <div class="text-xl font-medium mb-[20px]">数据管理</div>

        <el-form-item label="院区/楼栋" prop="cb_ids">
          <el-cascader
              style="width: 400px;"
              :options="searchLists.cb_lists"
              clearable
              v-model="formData.cb_ids"
              filterable
              :props="{
                checkStrictly: true
              }"
          />
        </el-form-item>

        <el-form-item label="分类" prop="room_type">
          <el-checkbox
              v-model="formData.room_type"
              v-for="(type_item, type_index) in searchLists.type_list"
              :label="type_item.model"
              :key="type_index">
            {{ type_item.name }}
          </el-checkbox>
        </el-form-item>

        <!--        <el-form-item label="科室" prop="department_id">-->
        <!--          <el-select v-model="formData.department_id" clearable placeholder="请选择科室" style="width: 400px;">-->
        <!--            <el-option label="全部" value=""></el-option>-->
        <!--            <el-option-->
        <!--                v-for="(item, index) in searchLists.department_list"-->
        <!--                :key="index"-->
        <!--                :label="item.name"-->
        <!--                :value="item.id"/>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->

        <el-form-item label="设备类型" prop="device_type">
          <el-radio-group v-model="formData.device_type">
            <el-radio :label="0">全部水电表</el-radio>
            <el-radio :label="1">水表</el-radio>
            <el-radio :label="2">电表</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="修改类型" prop="set_type">
          <el-radio-group v-model="formData.set_type">
            <el-radio :label="'coefficient'">系数</el-radio>
            <el-radio :label="'price'">水电价</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="需修改数" prop="set_data">
          <el-input v-model.trim="formData.set_data" style="width: 400px;" placeholder="请输入需修改数"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form-item>
      </el-card>
    </el-form>

    <!--    <footer-btns v-perms="['campus/data_set']">-->
    <!--      <el-button type="primary" @click="handleSubmit">提交</el-button>-->
    <!--    </footer-btns>-->
  </div>

  <div class="website-information" style="margin-top: 30px;">
    <el-card shadow="never" class="!border-none">
      <div class="text-xl font-medium mb-[20px]">水电表统一调控 - 默认数据
        <el-button type="primary" @click="quickSub" style="margin-left: 20px;">提交</el-button>
      </div>

      <div v-for="room_arr in searchLists.room_data" :key="room_arr">
        <el-row v-for="(room_val, room_key) in room_arr" :key="room_key">
          <el-col :span="24">
            <el-text class="el-text-mr">{{ room_key }}：</el-text>
            <div v-for="room in room_val" :key="room.id" style="display: inline-block;">
              <!--<el-tag effect="plain" class="el-text-mr" v-if="room.name == 's_device_coefficient'">系数：{{ room.value }}</el-tag>-->
              <!--<el-tag effect="plain" class="el-text-mr" v-if="room.name == 'd_device_coefficient'">系数：{{ room.value }}</el-tag>-->
              <!--<el-tag effect="plain" class="el-text-mr" v-if="room.name == 's_device_price'">价格：{{ room.value }}</el-tag>-->
              <!--<el-tag effect="plain" class="el-text-mr" v-if="room.name == 'd_device_price'">价格：{{ room.value }}</el-tag>-->

              <el-form-item style="margin-right: 30px;" v-if="room.name == 's_device_coefficient'">
                <el-input v-model="room.value" placeholder="请输入系数">
                  <template #prepend>系数</template>
                  <!--<template #append>系数</template>-->
                </el-input>
              </el-form-item>

              <el-form-item style="margin-right: 30px;" v-if="room.name == 'd_device_coefficient'">
                <el-input v-model="room.value" placeholder="请输入系数">
                  <template #prepend>系数</template>
                </el-input>
              </el-form-item>

              <el-form-item style="margin-right: 30px;" v-if="room.name == 's_device_price'">
                <el-input v-model="room.value" placeholder="请输入价格">
                  <template #prepend>价格</template>
                </el-input>
              </el-form-item>

              <el-form-item style="margin-right: 30px;" v-if="room.name == 'd_device_price'">
                <el-input v-model="room.value" placeholder="请输入价格">
                  <template #prepend>价格</template>
                </el-input>
              </el-form-item>

            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>

</template>

<style>
.el-text-mr {
  width: 200px;
  margin-right: 30px;
  margin-bottom: 10px;
  color: black;
  font-size: 16px;
}
</style>

<script lang="ts" setup name="dataControl">
import useAppStore from '@/stores/modules/app'
import type {FormInstance} from 'element-plus'
import {reactive} from "vue";
import {
  dataSet,
  dataControl,
  quickSet
} from "@/api/campus";
import feedback from "@/utils/feedback";
const formRef = ref<FormInstance>()
const appStore = useAppStore()
const emit = defineEmits(['success', 'close'])
import Popup from '@/components/popup/index.vue'
const popupRef = shallowRef<InstanceType<typeof Popup>>()


// 选择数据
const searchLists = reactive({
  cb_lists: [],
  department_list: [],
  room_data: [],
})
// 表单数据
const formData = reactive({
  set_data: '', // 需修改数
  set_type: 'coefficient', // 设置类型：coefficient=系数，price=水电价
  cb_ids: '', // 院区/楼栋
  department_id: '', // 院区/楼栋
  room_type: [], // 房间分类
  device_type: 0, // 设备类型
})

// 表单验证
const rules = {
  cb_ids: [
    {
      required: true,
      message: '请选择院区/楼栋',
      trigger: ['blur']
    }
  ],
  room_type: [
    {
      required: true,
      message: '请选择分类',
      trigger: ['blur']
    }
  ],
  set_data: [
    {
      required: true,
      message: '请输入需修改数',
      trigger: ['blur']
    }
  ],
}
// 获取信息
const getData = async () => {
  const data = await dataControl()
  for (const key in data) {
    //@ts-ignore
    searchLists[key] = data[key]
  }
}

// 设置备案信息
const handleSubmit = async () => {
  await formRef.value?.validate()
  await feedback.confirm('确定更新？')
  await dataSet(formData)
  emit('success')
}

const quickSub = async (data: any) => {
  const res = await quickSet(searchLists.room_data);
  console.log(res);
  emit('success')
}

getData()
</script>

<style lang="scss" scoped></style>
